<template>
	<div class="activePagination">
		<div class="pagination1">
			<h3>基础用法</h3>
			<el-row :gutter="20">
				<el-col :span="10">
					<h4 style="text-align: center;">页数较少时的效果</h4>
					<el-pagination layout="prev,pager,next" :total="50"></el-pagination>
				</el-col>
				<el-col :span="10">
					<h4 style="text-align: center;">大于7页时的效果</h4>
					<el-pagination layout="prev,pager,next" :total="1000"></el-pagination>
				</el-col>
			</el-row>
		</div>
		<div class="pagination2">
			<h3>设置最大页码按钮数-(pager-count)属性可以设置最大页码按钮数</h3>
			<el-pagination layout="prev,pager,next" :total="1000" :page-size="20" :pager-count="11"></el-pagination>
		</div>
		
		<div class="pagination3">
			<h3>带有背景色的分页-background</h3>
			<el-pagination layout="prev,pager,next" :total="1000" :page-size="20" :page-count="10" background></el-pagination>
		</div>
		<div class="pagination4">
			<h3>小型分页-small</h3>
			<el-pagination layout="prev,pager,next" :total="50" small></el-pagination>
		</div>
	</div>
</template>

<script>
</script>

<style>
</style>